React Streaming: Progresivní Server-Side Rendering pro optimalizovaný uživatelský zážitek

Ve světě webového vývoje je poskytování rychlého a responzivního uživatelského zážitku prvořadé. Uživatelé očekávají, že se webové stránky načtou rychle a budou interaktivní bez zpoždění. React, populární JavaScriptová knihovna pro tvorbu uživatelských rozhraní, nabízí mocnou techniku nazvanou Streaming Server-Side Rendering (SSR), která řeší tento problém. Tento článek se ponoří do konceptu React Streaming SSR, prozkoumá jeho výhody, implementaci a dopad na výkon webových stránek a uživatelský zážitek.

Co je Server-Side Rendering (SSR)?

Tradiční client-side rendering (CSR) zahrnuje stahování HTML, JavaScriptu a CSS souborů prohlížečem a následné renderování obsahu na straně klienta. I když je to flexibilní, tento přístup může vést k opožděnému počátečnímu renderování, protože uživatel musí počkat na stažení všech zdrojů a provedení JavaScriptu, než uvidí jakýkoli obsah. SSR na druhé straně renderuje React komponenty na serveru a odesílá plně renderované HTML na klienta. To vede k rychlejší počáteční době načítání, protože prohlížeč obdrží plně vytvořené HTML, které lze okamžitě zobrazit.

Omezení tradičního SSR

Zatímco tradiční SSR nabízí významné zlepšení oproti CSR, má svá vlastní omezení. V tradičním SSR musí být celá aplikace renderována na serveru, než může být jakékoli HTML odesláno klientovi. To může být úzké hrdlo, zejména u složitých aplikací s více komponentami a závislostmi na datech. Time to First Byte (TTFB) může být vysoké, což vede k vnímané pomalosti pro uživatele.

Představujeme React Streaming SSR: Progresivní přístup

React Streaming SSR překonává omezení tradičního SSR tím, že přijímá progresivní přístup. Místo čekání na dokončení renderování celé aplikace na serveru, Streaming SSR rozděluje proces renderování do menších částí (chunků) a tyto části streamuje klientovi, jakmile jsou k dispozici. To umožňuje prohlížeči začít zobrazovat obsah mnohem dříve, zlepšuje vnímaný výkon a snižuje TTFB. Představte si to jako restauraci, která připravuje vaše jídlo ve fázích: nejprve se podává předkrm, poté hlavní chod a nakonec dezert, místo abyste čekali, až bude celé jídlo připraveno najednou.

Výhody React Streaming SSR

React Streaming SSR nabízí řadu výhod pro výkon webových stránek a uživatelský zážitek:

• Rychlejší počáteční doba načítání: Streamováním HTML částí klientovi může prohlížeč začít zobrazovat obsah mnohem dříve, což vede k rychlejší vnímané době načítání a lepšímu zapojení uživatelů.
• Zlepšený Time to First Byte (TTFB): Streaming SSR snižuje TTFB tím, že odesílá počáteční HTML část ihned po její přípravě, namísto čekání na renderování celé aplikace.
• Zlepšený uživatelský zážitek: Rychlejší počáteční doba načítání vede k lepšímu uživatelskému zážitku, protože uživatelé nečekají na zobrazení obsahu.
• Lepší SEO: Vyhledávače mohou efektivněji prohledávat a indexovat obsah, protože HTML je na serveru snadno dostupné.
• Progresivní Hydratace: Streaming SSR umožňuje progresivní hydrataci, kde klientský React kód postupně připojuje posluchače událostí a zpřístupňuje aplikaci interaktivní, jakmile jsou HTML části streamovány.
• Lepší využití zdrojů: Rozdělením procesu renderování do menších částí může Streaming SSR zlepšit využití zdrojů na serveru.

Jak funguje React Streaming SSR

React Streaming SSR využívá API ReactDOMServer.renderToPipeableStream() ke streamování HTML částí klientovi. Toto API vrací čitelný proud (readable stream), který lze připojit k objektu odpovědi serveru. Zde je zjednodušená ilustrace toho, jak to funguje:

1. Server přijme požadavek na stránku.
2. Server zavolá ReactDOMServer.renderToPipeableStream() pro renderování React aplikace do proudu.
3. Proud začne emitovat HTML části, jakmile jsou React komponenty renderovány.
4. Server připojí proud k objektu odpovědi a odešle HTML části klientovi.
5. Prohlížeč přijme HTML části a začne je progresivně zobrazovat.
6. Jakmile jsou všechny HTML části přijaty, prohlížeč hydratuje React aplikaci a zpřístupní ji interaktivně.

Implementace React Streaming SSR

Pro implementaci React Streaming SSR budete potřebovat Node.js server a React aplikaci. Zde je průvodce krok za krokem:

1. Nastavení Node.js serveru: Vytvořte Node.js server pomocí frameworku jako Express nebo Koa.
2. Instalace React a ReactDOMServer: Nainstalujte balíčky react a react-dom.
3. Vytvoření React aplikace: Vytvořte React aplikaci s komponentami, které chcete renderovat na serveru.
4. Použití ReactDOMServer.renderToPipeableStream(): Ve svém serverovém kódu použijte API ReactDOMServer.renderToPipeableStream() pro renderování vaší React aplikace do proudu.
5. Připojení proudu k objektu odpovědi: Připojte proud k objektu odpovědi serveru pro odeslání HTML částí klientovi.
6. Zpracování chyb: Implementujte zpracování chyb pro zachycení jakýchkoli chyb, které se mohou vyskytnout během procesu renderování.
7. Přidání značky skriptu pro hydrataci: Zahrňte do HTML značku skriptu pro hydrataci React aplikace na straně klienta.

Příklad kódového úryvku (Server-Side):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Vaše React komponenta

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Vstupní bod na straně klienta
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Omlouváme se, něco se pokazilo
');
    }
  });

  setTimeout(abort, 10000); // Volitelné: Timeout pro zabránění nekonečnému zablokování
});

app.use(express.static('public')); // Slouží statické prostředky

app.listen(port, () => {
  console.log(`Server naslouchá na http://localhost:${port}`);
});

Příklad kódového úryvku (Client-Side - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

Příklad React App Komponenty (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data úspěšně načtena!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simulace zpoždění načítání
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Vítejte ve Streaming SSR!
      
Toto je ukázka React Streaming SSR.
      Načítání...
}>